
<template>

  <div class="mainPage">

    <el-row>
      <el-col :span="24"><div class="main_head">数据统计</div></el-col>
    </el-row>

    <el-row :gutter="20" class="mar_bom_20">
      <el-col :span="8">
        <el-card class="box-card box-card-style">
            <el-col :span="3">
              <i class="icon iconfont icon-1"></i>
            </el-col>
            <el-col :span="8">
                <div class="col_999 mar_bom_10">缴费用户数</div>
                <div class="fs_20 col_333"><b class="bg_f44"></b>143</div>
            </el-col>
            <el-col :span="13">
                <div class="col_999 mar_bom_10">今日新增缴费用户数</div>
                <div class="fs_20 col_333"><b class="bg_f44"></b>3</div>
            </el-col>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card box-card-style">
            <el-col :span="3">
              <i class="icon iconfont icon-yonghu"></i>
            </el-col>
            <el-col :span="8">
              <div class="col_999 mar_bom_10">签约用户数</div>
              <div class="fs_20 col_333"><b class="bg_00c192"></b>245</div>
            </el-col>
            <el-col :span="13">
              <div class="col_999 mar_bom_10">今日签约缴费用户数</div>
              <div class="fs_20 col_333"><b class="bg_00c192"></b>16</div>
            </el-col>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card box-card-style">
            <el-col :span="3">
              <i class="icon iconfont icon-money"></i>
            </el-col>
            <el-col :span="8">
              <div class="col_999 mar_bom_10">交易总数</div>
              <div class="fs_20 col_333"><b class="bg_fc720b"></b>33245</div>
            </el-col>
            <el-col :span="13">
              <div class="col_999 mar_bom_10">今日新增交易数</div>
              <div class="fs_20 col_333"><b class="bg_fc720b"></b>16</div>
            </el-col>
        </el-card>
      </el-col>
    </el-row >

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card box-card-style-big">
          <el-col :span="12" class="col_999">
            <b>总</b>
            总交易金额
          </el-col>
          <el-col :span="12">
            <div style="margin-top: 40px" class="fs_22 col_fc720b">
              ¥12,234.00元
            </div>
          </el-col>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card box-card-style-big">
          <el-col :span="12" class="col_999">
            <b>今</b>
            今交易金额
          </el-col>
          <el-col :span="12">
            <div style="margin-top: 40px" class="fs_22 col_fc720b">
              ¥12,234.00元
            </div>
          </el-col>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>



<script>

  export default {
    data: function (){
      return {
        active:true
      }
    }
  }
</script>

<style>
  @import "../assets/css/common.css";
  .main_head{
    font-size: 16px;
    color: #999;
    margin-bottom: 40px;
  }
  .box-card-style{
    height: 100px;
    text-align: center;
  }
  .box-card-style b{
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .el-card__body{
    padding: 20px 0;
  }
  .box-card-style .icon{
    font-size: 14px;
    padding: 2px;
    border-radius: 50%;
    background: #ff4444;
    color: #fff;
  }
  .box-card-style .icon-1{  background: #ff4444;  }
  .box-card-style .icon-yonghu{  background: #00c192;  }
  .box-card-style .icon-money{  background: #fc720b;  }

  .box-card-style-big{
    height: 150px;
  }
  .box-card-style-big b{
    width: 14px;
    height: 14px;
    background: #00AAEE;
    color: #fff;
    border-radius: 50%;
    padding: 2px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
  }
</style>
